Skip to main content

🧭 Navigation Link

The Navigation Link feature in AppStruct provides an easy and efficient way to link different screens or external URLs, enabling users to navigate seamlessly within your app. With just a few simple steps, you can create smooth transitions between pages and direct users to relevant content, thereby enhancing the app's user experience.

This guide will walk you through the process of using the Navigation Link.

Step 1: Select the Component

  1. Navigate to the Canvas area in your AppStruct workspace where your app screens are displayed.
  2. Click on the component (e.g., button, image) to which you want to add a navigation link.
  3. Once the component is selected, the Left Toolbar will appear, displaying configuration options for the component.
  4. Under the Click Actions section in the Left Toolbar, click on "Add Action" to open the list of available actions.
  5. From the list of available actions, click on "Navigation Link". This will add a new node labeled Navigation Link under Click Actions.

AppStruct allows you to configure two types of Navigation Link actions: internal navigation within the app and external links to websites.

Option 1: Redirect Inside App (Internal Navigation)​

  1. Under Navigation Link, use the dropdown menu to choose "Redirect inside app".
  2. A new dropdown labeled Screen will appear.
  3. Select the target screen from the list of available screens in your project where you want to redirect the user.
  4. Example: If you want users to go to the "Profile" screen after clicking the button, choose "Profile" from the dropdown.
  5. After configuring the link, click the "Save" button to save settings.
  1. Under Navigation Link, choose "HTTP link" from the dropdown menu.
  2. A new text field labeled URL will appear.
  3. Enter the full URL of the external website where you want to redirect users (e.g., https://example.com).
  4. After configuring the link, click the "Save" button to save settings.

Once your Navigation Link has been configured, it is important to test it to ensure it functions as expected.

  1. Click on the "Preview" button located in the Up Toolbar to enter the preview mode of your app.
  2. In preview mode, interact with the component to which you added the Navigation Link.
  3. Confirm that the navigation occurs as expected. For internal links, verify that the correct screen is displayed. For external links, ensure the URL opens correctly.

Best Practices​

To ensure a smooth experience when using the Navigation Link feature, follow these best practices:

  1. Provide User Feedback:
    • Use indicators such as animations or text changes to inform users when they click on a component that performs navigation.
  2. Test Navigation Thoroughly:
    • Ensure all links are configured correctly and lead to the expected screens or URLs. Broken links can lead to a poor user experience.
  3. Use Descriptive Names for Screens:
    • Naming screens descriptively (e.g., "User Profile", "Settings") will make it easier to identify them when setting up internal navigation links.
  4. Avoid Overloading Components with Actions:
    • While AppStruct allows adding multiple actions to a component, avoid overloading a single component with too many actions, as it may confuse users.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Building with AppStruct!